<template>
	<view class="pages">
		<!-- 商品信息 -->
		<view class="goodsbox" @click="toDetail(goodsDetails.id)">
			<image :src="coverImg" mode="aspectFill" class="coverHeadimg"></image>
			<view class="goods_ringt">
				<view class="name">{{goodsDetails.name}}</view>
				<view class="flex justify-between align-center" style="padding: 14rpx 0;">
					<view class="bargainText">
						<text style="font-size: 24rpx;">抢购后</text><br>
						<text style="font-size: 34rpx;">￥{{goodsDetails.shop_price}}</text>
					</view>
					<view class="lineation">原价￥{{goodsDetails.market_price}}</view>
				</view>
				<view style="font-size:24rpx">{{goodsDetails.shop_info.shopName}}</view>
				<view style="font-size: 22rpx;color: #999;margin-top: 14rpx;">距我<{{goodsDetails.shop_info.juli}}</view>
			</view>
		</view>
	<!-- 商品信息end -->
	<!-- 抢购 -->
	<view class="flex justify-between">
		<view class="bangbtn" @click="kanjia(goodsDetails.id,'')">帮他(她)砍</view>
		<view class="bangbtn btn1" @click="toDetail(goodsDetails.id)">直接抢购</view>
	</view>
	<view class="countDown">
		<text>还剩</text>
		<benben-countdown class='kanjiaBox' :count-time="goodsDetails.today_remaining">
		    <template #default="{ d, h, i, s }">
		        <text class='kanjia-item'>{{h}}</text>
		
		        <text>:</text>
		
		        <text class='kanjia-item'>{{i}}</text>
		
		        <text>:</text>
		
		        <text class='kanjia-item'>{{s}}</text>
		
		        <text></text>
		    </template>
		</benben-countdown>
		<text>结束，再不下手就被抢走啦！</text>
	</view>
	<view class="noticeTile" @click="noticeShow = true">--------  购买需知  --------</view>
	<!-- 抢购end -->
	<!-- 推荐 -->
	<view class="title">相关推荐</view>
	<view>
		<view class="list_item" v-for="(item,index) in lists" :key="index" @click="toDetail(item.id)">
			<image :src="item.store_logo" mode="aspectFill" class="coverHeadimg"></image>
			<view class="goods_ringt">
				<view class="name">{{item.name}}</view>
				<view class="flex justify-between align-center" style="padding: 14rpx 0;">
					<view class="bargainText">
						<text style="font-size: 24rpx;">抢购后</text><br>
						<text style="font-size: 34rpx;">￥{{item.real_shop_price}}</text>
					</view>
					<view class="lineation">原价￥{{item.market_price}}</view>
				</view>
				<view style="font-size:24rpx">{{item.store_name}}</view>
				<view class="flex justify-between" style="margin-top: 12rpx;">
					<view class="juliStyle">距我<{{item.juli}}</view>
					<view class="right flex overHidden" @click.stop>
					<!-- #ifdef MP-WEIXIN -->
					<block v-if="Number(item.share_award_money) != 0">
						<button class="cu-btn btn flex align-center justify-center btn-left" open-type="share" style="flex-wrap: nowrap;background: #fa692c;" :data-item="item">
							<text class="text-cut">分享赚{{Number(item.share_award_money) || 0}}</text>
							<image src="/static/jinbi.png" class="icon fu-block-24"></image>
						</button>
						<block v-if="item.stock">
							<view class="btn btn-right" v-if="!item.is_bargain" @click.stop="kanjia(item.id,index)" style="font-size: 28rpx;">抢购</view>
							<button class="cu-btn btn share btn-right" open-type="share" :data-item="item" v-else style="padding: 0;white-space: nowrap;font-size: 28rpx;background: #feefe8;">再砍</button>
						</block>
						<block v-else>
							<view class="btn over-btn btn-right" @click="qingguang">已抢光</view>
						</block>
					</block>
					<block v-else>
						<block v-if="item.stock">
							<view class="btn2 btn-right" v-if="!item.is_bargain" @click.stop="kanjia(item.id,index)">抢购</view>
							<button class="cu-btn btn2 share btn-right" open-type="share" :data-item="item" v-else style="padding: 0;white-space: nowrap;background: #feefe8;">再砍</button>
						</block>
						<block v-else>
							<view class="btn2 over-btn btn-right" @click="qingguang">已抢光</view>
						</block>
					</block>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS || H5 -->
						<block v-if="Number(item.share_award_money) != 0">
							<button class="cu-btn btn flex align-center justify-center btn-left" @click="shareWx(item)" style="flex-wrap: nowrap;background: #fa692c;" :data-item="item">
								<text class="text-cut">分享赚{{Number(item.share_award_money) || 0}}</text>
								<image src="/static/jinbi.png" class="icon fu-block-24"></image>
							</button>
							<block v-if="item.stock">
								<view class="btn btn-right" v-if="!item.is_bargain" @click.stop="kanjia(item.id,index)" style="font-size: 28rpx;">抢购</view>
								<button class="cu-btn btn share btn-right" @click="shareWx(item)" v-else style="padding: 0;white-space: nowrap;font-size: 28rpx;background: #feefe8;">再砍</button>
							</block>
							<block v-else>
								<view class="btn over-btn btn-right" @click="qingguang">已抢光</view>
							</block>
						</block>
						<block v-else>
							<block v-if="item.stock">
								<view class="btn2 btn-right" v-if="!item.is_bargain" @click.stop="kanjia(item.id,index)">抢购</view>
								<button class="cu-btn btn2 share btn-right" @click="shareWx(item)" v-else style="padding: 0;white-space: nowrap;background: #feefe8;">再砍</button>
							</block>
							<block v-else>
								<view class="btn2 over-btn btn-right" @click="qingguang">已抢光</view>
							</block>
						</block>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 推荐end -->
	<uni-load-more :status="status" v-if="lists.length > 5"></uni-load-more>
	<fu-popup mode="center" border-radius="16" v-model="noticeShow" :safe-area-inset-bottom="true" :mask-close-able="true">
		<view class="notice-box" >
			<view class="notice-head">
				<view></view>
				<view>购买需知</view>
				<image src="../../../static/quit.png" mode="" class="quitStyle" @click="noticeShow = false"></image>
			</view>
			<view class="noticeHtml" v-html="goodsDetails.body"></view>
		</view>
	</fu-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeShow:false,//须知弹窗
				order_sn:'',
				coverImg:'',//封面
				goodsDetails:{},//商品详情
				lists:[],
				goods_id:'',
				status: 'more',
				page:1,
				size:10,
			};
		},
		async onShareAppMessage(res) {
			console.log(res, 'hsaressss')
			let info = {
				title: '',
				path: '',
				imageUrl: ''
			};
			if (res.from == 'button') {
				let data = res.target.dataset.item;
				console.log(data, 'daaaaaa')
				uni.showLoading()
				await this.$api.post(global.apiUrls.post6406d647c5828, {
					goods_id: data.id,
					lng: this.location.longitude,
					lat: this.location.latitude,
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						info.title = `原价¥${data.market_price},现价¥${data.shop_price}!【${data.name}】${data.store_name}`
						info.path = `/pages/goods/goodsdetail/goods-detail/index?goods_id=${data.id}&type=share&share_sign=${data.share_sign}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
						// info.path = `/pages/goods/sharePages/sharePages?goods_id=${data.id}&type=share&share_sign=${data.share_sign}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
						info.imageUrl = data.thumb
					} else {
						this.$message.info(res.data.msg)
						return false;
					}
				}).catch(() => {
					uni.hideLoading()
				})
			} else {
				info.path = `pages/tab/home/shopindex/index?page_type=share&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
			}
			if (info.path) {
				return info;
			}
		},
		onReachBottom(e) {
			console.log('opopopopop')
			this.getList();
		},
		comments:{
			userInfo() {
				return this.$store.getters.userInfo;
			},
			location() {
				return this.$store.getters.location;
			}
		},
		onLoad(optins) {
			this.goods_id = optins.goods_id
			this.location = this.$store.state.location;
			this.getGoodsDetail()
			this.getList()
		},
		methods:{
			// 分享到微信
			shareWx(info){
				console.log('sssssss',info);
				console.log('分享',`/pages/goods/goodsdetail/goods-detail/index?sku_id=0&goods_id=${info.id}&type=share&invite_code=${this.icode}`);
				uni.share({
					provider:'weixin',
					scene: "WXSceneSession",
					type: 5,
					title: `原价¥${info.market_price},现价¥${info.shop_price}!【${info.name}】${info.store_name}`,
					// href:`https://localelife.chunchuangkeji.cn/h5/index.html#/pages/goods/goodsdetail/goods-detail/index?sku_id=0&goods_id=${info.id}`,
					// summary: `原价¥${info.market_price},现价¥${info.shop_price}!【${info.name}】${info.store_name}`,
					imageUrl: info.thumb,
					miniProgram: {
					    id: 'gh_0fbfb5730c34',
					    // path: `/pages/goods/goodsdetail/goods-detail/index?sku_id=0&goods_id=${info.id}&type=share&invite_code=${this.icode}`,
					    path: `/pages/goods/sharePages/sharePages?sku_id=0&goods_id=${info.id}&type=share&invite_code=${this.icode}`,
					    type: 0,
					    webUrl: 'http://uniapp.dcloud.io'
					},
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 跳转
			toDetail(id) {
				this.$urouter.redirectTo({
				  url: '/pages/goods/goodsdetail/goods-detail/index',
				  params: {
				    sku_id: 0,
				    goods_id: id
				  }
				});
			},
			// 列表
			listkanjia(item,index) {
				if (item.stock == 0) {
					this.$message.info('该商品暂无库存')
					return;
				}
				uni.showLoading()
				this.$api.post(global.apiUrls.post64031a6b88f68, {
					goods_id: item.id
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						// this.page = 1
						// this.status = 'more';
						// this.size = this.lists.length
						// this.getList();
						this.$message.info(`恭喜已成功砍掉${res.data.data.bargain_price}元，喜欢尽快下单吧!`)
						this.lists[index].bargain++
						setTimeout(()=>{
							this.getGoodsList()
						},800)
						// this.lists[index].click++
						// this.$set(item, 'is_bargain', 1)
						// this.$set(item, 'shop_price', res.data.data.shop_price)
					} else {
						this.$message.info(res.data.msg)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 首页数据
			loadData() {
				
				this.getGoodsList();
			},
			// 抢购
			kanjia(id,index) {
				// if (this.goodsDetails.stock == 0) {
				// 	// this.$message.info('该商品暂无库存')
				// 	return;
				// }
				this.$api.post(global.apiUrls.post64031a6b88f68, {
					goods_id: id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.info(`恭喜已成功砍掉${res.data.data.bargain_price}元，喜欢尽快下单吧!`)
						// this.loadData(false);
						// this.goodsDetails.price = res.data.data.shop_price
						// this.goodsDetails.bargain++
						this.getGoodsDetail()
						this.lists[index].is_bargain = 1
						this.$forceUpdate()
						// uni.$emit('updataShopInfo',this.goodsInfo)
						// uni.$emit('updateHomeStatus', this.goods_id)
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			// 商品详情
			getGoodsDetail(){
				this.$api
					.post(global.apiUrls.getGoodsDetail, {
						goods_id: this.goods_id,
						user_id: (this.userInfo && this.userInfo.id) || 0,
						lat: this.location.latitude,
						lng: this.location.longitude,
						order_sn:this.order_sn
					})
					.then(res =>{
						console.log('商品详情',res);
						if(res.data.code == 1){
							this.goodsDetails = res.data.data
							this.coverImg = res.data.data.images[0]
						}
					})
			},
			// 推荐列表
			getList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.post5db113922d297, {
					cid: 0,
					page: this.page,
					list_rows: this.size,
					is_goods_type: 1,
					lng: this.location.longitude,
					lat: this.location.latitude,
					goods_type: 1
				}).then(res => {
					
					if (res.data.code == 1) {
					  // let total = res.data.data.total;
					  let last_page = res.data.data.last_page;
					  let list = res.data.data.data;
					  if (this.page == 1) this.lists = [];
					  this.lists.push(...list);
					  if (this.page < last_page) {
						  this.status = 'more';
						  this.page++;
					  } else {
					    this.status = 'noMore';
					  }
						console.log('列表',this.lists);
					  uni.stopPullDownRefresh();
					} else {
					  this.status = 'more';
					  uni.stopPullDownRefresh();
					}
					this.size = 10
					this.isInit = true
					this.size = 10
					this.isInit = true
				}).catch(() => {
					this.status = 'more';
					uni.stopPullDownRefresh();
				})
			},
		}
	}
</script>

<style lang="scss">
.pages{
	padding: 38rpx 24rpx;
}
.notice-box{
	padding:24rpx;
	margin:30rpx;
	border-radius:18rpx;
	background:#fff;
}
.quitStyle{
			width: 35rpx;
			height: 35rpx;
		}
.noticeHtml{
	height: 600rpx;
	overflow-y: scroll;
}
.noticeTile{
	color: #666;
	text-align: center;
	margin-top: 38rpx;
}
.notice-head{
			color: #333;
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
		}
.goodsbox{
	display: flex;
	background: #fff;
	border-radius: 18rpx;
	overflow: hidden;
}
.goods_ringt{
	width: 400rpx;
	padding: 12rpx;
	font-size: 28rpx;
}
.name{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-all;
	-webkit-line-clamp: 2;
}
.lineation{
	color: #999;
	text-decoration: line-through;
	font-size: 24rpx;
}
.bargainText{
	color: #ff5c5c;
	font-weight: 600;
}
.coverHeadimg{
	width: 300rpx;
	height: 300rpx;
}
.bangbtn{
	color: #fff;
	width: 300rpx;
	height: 90rpx;
	font-size: 34rpx;
	margin-top: 38rpx;
	text-align: center;
	line-height: 90rpx;
	border-radius: 60rpx;
	background: #56bf2e;
}
.btn1{
	background: #ff622f;
}
.countDown{
	text-align: center;
	margin-top: 38rpx;
}
.kanjiaBox{
		font-size: 30rpx;
	}
	.kanjia-item{
		color: #fff;
		padding: 8rpx;
		font-size: 28rpx;
		margin:0 6rpx;
		border-radius: 12rpx;
		background-color: #ff6f27;
	}
.title{
	font-size: 32rpx;
	font-weight: 600;
	margin-top: 32rpx;
}
.list_item{
	display: flex;
	background: #fff;
	margin-top: 24rpx;
	border-radius: 18rpx;
	overflow: hidden;
}
.juliStyle{
	color: #999;
	font-size: 22rpx;
	margin-top: 14rpx;
}
.kanjiaBtn{
	width: 140rpx;
	height: 56rpx;
	text-align: center;
	line-height: 56rpx;
	font-size: 28rpx;
	color: #fff;
	box-sizing: border-box;
	background-color: #FF6F27;
	border-radius: 28rpx;
}
.btn {
		min-width: 105rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 20rpx;
		color: #fff;
		box-sizing: border-box;
		background-color: #FF6F27;
		padding: 0 8rpx;
	}
	.btn-left {
		border-radius: 28rpx 0 0 28rpx;
		border-right: 1rpx solid #eee;
	}
	.btn-right {
		border-radius: 0 28rpx 28rpx 0;
	}
	.btn2 {
		width: 140rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #fff;
		box-sizing: border-box;
		background-color: #FF6F27;
		border-radius: 28rpx;
	}
	.share {
		background-color: rgba(255, 111, 39, 0.10);
		border: 1rpx solid #FF6F27;
		color: #FF6F27;
	}
	.over-btn {
		background-color: #999;
	}
</style>
